<template>
<div class="bg">

    <div class="content">
        <a-card :hoverable="true">

            <p style="text-align: center;font-size: large;color: blue">
                Lte Admin</p>

            <a-form
                    id="components-form-demo-normal-login"
                    :form="form"
                    class="login-form"
                    @submit="handleSubmit"
            >
                <a-form-item>
                    <a-input :allowClear="allowClear"
                             v-decorator="[
          'account',
          { rules: [{ required: true, message: 'Please input your account!' }] },
        ]"
                             placeholder="账号"
                    >
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input :allowClear="allowClear"
                             v-decorator="[
          'pwd',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                             type="password"
                             placeholder="密码"
                    >
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-item>

                <a-form-item>
                    <a-input :allowClear="allowClear"
                             v-decorator="[
          'verifyCode',
          { rules: [{ required: true, message: 'Please input verifyCode!' }] },
        ]"
                             placeholder="验证码"
                    >
                        <a-icon slot="prefix" type="safety" style="color: rgba(0,0,0,.25)"/>
                    </a-input>
                </a-form-item>

                <a-form-item>
                    <a-checkbox
                            v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
                    >
                        记住我
                    </a-checkbox>
                    <img class="login-form-forgot" @click="execGetCaptcha" :src="captcha" alt="">

                    <a-button type="primary" html-type="submit" class="login-form-button">
                        登录
                    </a-button>
                    

                    <!--     a标签隐藏页面左下角链接，使用 onclick代替href                -->
                    <!--
                    <a href="javascript:void(0)"
                       onclick="window.location.href='https://oapi.dingtalk.com/connect/qrconnect?appid=dingoajs62b97gksaysthw&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://39.106.225.186:8083/'"
                    >
                        使用钉钉登录
                    </a>
                    
                    <a class="login-form-forgot" href="">
                        忘记密码
                    </a>
                    -->
                </a-form-item>
            </a-form>
        </a-card>

        <p style="margin:0 auto;text-align: center;color: white">
            Copyright by xxx @2020
        </p>
    </div>
</div>

</template>

<script>
    // const myMockData = require("./mock/menu.json");
    // import staMenu from '../../mock/menu.json'
    // function hidestatus() {
    //     window.status = "隐藏的链接";
    //     return true;
    // }

    import {loginReq, getCaptcha} from "@/api/backend-req/login";

    export default {
        name: "Auth",

        data() {
            return {
                captcha: '',
                captchaUUID: '',
                allowClear: true,
                formLayout: 'horizontal',
                form: this.$form.createForm(this, {name: 'normal_login'})
            };
        },
        created() {
            console.log(this.$route);
            let routeNameTarget = this.$route.name;
            let routeQueryTarget = this.$route.query;

            //在没点退出按钮就访问登录页/根目录时，直接跳回首页defaultHome，因为没点退出按钮，session还在
            let loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'));
            //在home页面访问login，仍调回home页
            if (routeNameTarget === 'Auth' && loginInfo !== null && loginInfo.token !== undefined) {
                console.warn("已登录，自动返回首页")
                this.$router.push({path: 'defaultHome'})
            }

            if (routeQueryTarget !== {} && routeQueryTarget.state === 'STATE' && routeNameTarget === 'Auth') {
                console.warn(routeQueryTarget);
                this.$reqGlobal.get('/lte/oauthLogin', {params: routeQueryTarget}).then(res => {
                    if (res.data.code === 0) {

                        console.log('login res ---', res)
                        sessionStorage.setItem('loginInfo', JSON.stringify(res.data.data));
                        this.$message.success('登陆成功!');

                        this.$router.push({path: 'defaultHome'})
                    }
                });
            }


        },
        mounted() {


            console.log(
                `%c lte-admin %c Design by antdv %c`,
                'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
                'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
                'background:transparent'
            );
            this.execGetCaptcha();


        },
        methods: {
            execGetCaptcha() {
                getCaptcha().then(res => {
                    // console.log(res);
                    this.captcha = res.data.data.base64Captcha;
                    this.captchaUUID = res.data.data.uuidCaptcha;

                }).catch(err => {

                });
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // console.log('Received values of form: ', values);
                        let reqParam = values;
                        //前端使用md5加密密码
                        let passMd5 = this.$md5(reqParam.pwd);
                        let req = JSON.parse(JSON.stringify(reqParam));
                        req.pwd = passMd5;
                        req.uuid = this.captchaUUID;

                        loginReq(req).then(res => {
                            if (res.data.code === 0) {
                                console.log('login res ---', res)
                                sessionStorage.setItem('loginInfo', JSON.stringify(res.data.data));
                                this.$message.success('登陆成功!');
                                console.log(
                                    `%c lte-admin %c 登录系统ok %c`,
                                    'background:blue ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
                                    'background:red ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
                                    'background:transparent'
                                );
                                this.$router.push({path: '/defaultHome'})
                                // this.$router.push({path:'/defaultHome',query:res.data.data})
                            } else {
                                if (res.data.code === 9803) {
                                    this.form.resetFields('verifyCode');
                                    this.execGetCaptcha();
                                    this.$message.error('验证码校验错误,请重新输入验证码!');
                                } else {

                                    this.$message.error(res.data.msg);
                                }
                            }

                        });
                    }
                });
            },

        },
    }
</script>

<style scoped>
.bg{
    background-image: url("../../public/img/bg_starry.jpg");
height: 100%;
}

    .content {
        width: 400px;
        margin: 0 auto;
        top: 100px;
        position: relative;

    }

    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }

    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }

    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
</style>
